<template>
	<view class="liao">
		<view class="bigBox" >
			<ul class="messlist" id="messageRef">
				<li :class="['left', { 'right': item.isMy }]" v-for="(item, idx) in xiaoxiList" :key="idx">
					<view style="display: flex;align-items: center;">
						<image v-if="item.isMy === false" style="width: 80rpx;height: 80rpx;border-radius: 50%;"
							:src="data.obj.avatar" alt="" />
						<view style="padding-right: 5px;">
							<!-- 这个是之前的 -->
							<view class="isHer" v-if="item.isMy === false">
								<view>{{ item.message }}</view>
								<view v-if="item.basevideo" @tap="playVoice(item.basevoice)">
									<view class="loader">
										<view class="loader__bar"></view>
										<view class="loader__bar"></view>
										<view class="loader__bar"></view>
										<view class="loader__bar"></view>
									</view>
								</view>
								<view v-if="item.xls" class="xlss" @tap="files">
									<text style="margin-left: 20rpx;">data.xlsx</text>
									<img src="../../../static/img/xls.jpg" alt="Shanghai"
										style="width:30%;height:110rpx;line-height: 110rpx;margin-top: 5rpx;margin-left: 50rpx;" />
								</view>
							<!-- 	<view class="massage" v-show="item.basevoice">
									<view class="msg-text voice" :style="{ width: item.voicetime * 4 + 'px' }"
										@tap="playVoice(item.basevoice)">
										{{ item.voicetime }}
									</view>
								</view> -->
								<view v-if="item.longitude">
									<map class="map" :longitude="item.longitude" :latitude="item.latitude"
										:markers="markers"></map>
								</view>
							</view>
							<view class="myMess" v-if="item.isMy">
								<view v-show="item.message !== ''">{{ item.message }}</view>
								<view v-if="item.basevideo" >
									<view class="loader" @tap="playVoice(item.basevideo)">
										<view class="loader__bar"></view>
										<view class="loader__bar"></view>
										<view class="loader__bar"></view>
										<view class="loader__bar"></view>
									</view>
								</view>
								<view v-if="item.xls" class="xls" @tap="files">
									<text style="margin-left: 20rpx;">data.xlsx</text>
									<img src="../../../static/img/xls.jpg" alt="Shanghai"
										style="width:30%;height:110rpx;line-height: 110rpx;margin-top: 5rpx;margin-left: 50rpx;" />
								</view>							
								<view v-if="item.longitude">
									<map class="map" :longitude="item.longitude" :latitude="item.latitude"
										:markers="markers"></map>
								</view>
							</view>
						</view>
					</view>
					<image v-if="item.isMy" style="width: 80rpx;height: 80rpx;border-radius: 50%;" :src="avatar"
						alt="" />
				</li>
			</ul>
		</view>

	</view>
	<!--  -->
	<view v-if="starting">
		<!-- 发送消息 -->
		<view v-show="is_show" class="input-box">
			<uni-icons type="mic" size="25" @tap="toggleRecordMode"
				style="margin-left: 10rpx;margin-right:10rpx;"></uni-icons>
			<textarea class="input-field" v-model="message" @focus="showSendButtons" @blur="hideSendButton"></textarea>
			<uni-icons custom-prefix="iconfont" type="icon-xiaolian" size="30" @tap="toggleActionPanel"
				style="margin-left:15rpx;"></uni-icons>
			<uni-icons type="plus" size="35" @click="ismore"></uni-icons>
			<button class="send-btn" @tap="sendMessage">发送</button>
		</view>

		<view v-if="isShow" class="sub-chat">
			<uni-icons type="mic" size="25" @tap="toggleRecordModes"></uni-icons>
			<textarea @touchstart="startRecording" v-model="basevideo" @touchend="stopRecording"
				class="input-field-case">按住说话</textarea>
			<uni-icons custom-prefix="iconfont" type="icon-xiaolian" size="30" @tap="toggleActionPanel"
				style="margin-left:15rpx;"></uni-icons>
		</view>
	</view>

	<view v-else>
		<!-- 发送消息 -->
		<view v-show="is_show" class="input-box">
			<uni-icons type="mic" size="30" @tap="toggleRecordMode"></uni-icons>
			<textarea class="input-field" v-model="message" @focus="showSendButtons" @blur="hideSendButton"></textarea>
			<uni-icons custom-prefix="iconfont" type="icon-xiaolian" size="30" @tap="toggleActionPanel"
				style="margin-left:15rpx;"></uni-icons>
			<uni-icons type="plus" size="35" @click="ismore"></uni-icons>
			<button class="send-btn" @tap="sendMessage">发送</button>
		</view>

		<view v-if="isShow" class="sub-chat">
			<uni-icons type="mic" size="25" @tap="toggleRecordModes"></uni-icons>
			<textarea @touchstart="startRecording" v-model="basevideo" @touchend="stopRecording"
				class="input-field-case">按住说话</textarea>
			<uni-icons custom-prefix="iconfont" type="icon-xiaolian" size="30" @tap="toggleActionPanel"
				style="margin-left:15rpx;"></uni-icons>
		</view>
		<!-- 表情包 -->
		<view v-if="!showActionPanel" class="emos">
			<scroll-view class="emoji" scroll-y="true">
				<view class="emoji-line" v-for="(line, i) in emojis" :key="i">
					<view class="emoji-line-item" v-for="(item, index) in line" :key="index" @click="clickEmoji(item)">
						{{ item }}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 更多操作 -->
		<view class="more" v-else>
			<view class="more-list">
				<uni-icons custom-prefix="iconfont" type="icon-zhaopian" size="40"></uni-icons>
				<view class="more-list-title">照片</view>
			</view>
			<view class="more-list" @tap="sendFile('position')">
				<uni-icons custom-prefix="iconfont" type="icon-dingwei" size="40"></uni-icons>
				<view class="more-list-title">定位</view>
			</view>
			<view class="more-list" @tap="sendFile('xls')">
				<uni-icons custom-prefix="iconfont" type="icon-wenjianjia" size="40"></uni-icons>
				<view class="more-list-title">文件</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref,
		nextTick
	} from 'vue';
	import * as XLSX from 'xlsx';

	const avatar = uni.getStorageSync('avatar')
	const rsd = ref(false)
	const fileUrl = ref('http://store/SrGrCV5sx1co9fa3378b7b8a7ca4597f30cca706e2b9.xlsx')
	// 获取本地存储
	const xiaoxiList = ref([])
	const markers = ref([{
		id: 1,
		width: 20,
		height: 20,
		iconPath: '../../../static/Markers.png'
	}])
	const input = ref('')
	const message = ref('')
	const basevideo = ref('')
	const timeConnect = ref(0)
	const isrecord = ref('false')
	const starting = ref(true)
	const toc = ref("../../../static/img/R-C.jfif")
	const isShow = ref(false)
	const is_show = ref(true)
	const showEmojiPanel = ref('false')
	const showActionPanel = ref('false')
	const voice = ref(true)
	const emojis = ref([
		['😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆'],
		['😉', '😊', '😋', '😎', '😍', '😘', '😗', '😙'],
		['😚', '☺️', '🙂', '🤗', '🤔', '😐', '😑', '😶'],
		['🙄', '😏', '😣', '😥', '😮', '🤐', '😯', '😪'],
		['😫', '😴', '😌', '😛', '😜', '😝', '🤤', '😒'],
		['😓', '😔', '😕', '😕', '🙃', '🤑', '😲', '☹'],
		['🙁', '😖', '😞', '😟', '😤', '😢', '😭', '😦']
	])
	const data = reactive({
		//单聊好友信息
		obj: []
	})
	const vlength = ref(0) //音频时长
	const voicebg = ref(true) //音频取消
	const pageY = ref(0) // 终止y轴位置
	const times = ref(0)
	const recorderManager = uni.getRecorderManager()
	const innerAudioContext = uni.createInnerAudioContext();
	const datas = ref([{
		latitude: 39.9042,
		longitude: 116.4074
	}, {
		latitude: 31.9686,
		longitude: 99.9018
	}])
	const lonLat = ref({})
	const saveFileUrl = ref('')

	// 录音处理
	const toggleRecordMode = () => {
		isShow.value = !isShow.value
	}

	const toggleRecordModes = () => {
		isShow.value = false
		voice.value = !voice.value
		isrecord.value = !isrecord.value; // 切换录音模式
	}

	// 开始录音
	const startRecording = (e) => {
		voicebg.value = false;
		let i = 1
		times.value = setInterval(() => {
			vlength.value = i
			i++
			if (i > 9) {
				// 结束计时
				clearInterval(times.value)
				stopRecording()
			}
		}, 1000)
		recorderManager.start();
	}

	// 停止录音
	const stopRecording = () => {
		clearInterval(times.value)
		recorderManager.stop();
		recorderManager.onStop((res) => {
			let data = {
				voice: res.tempFilePath,
				timed: vlength.value
			}
			if (!voicebg.value) {
				sendMessage(data)
				// console.log(data.detail, 56789);
			}
			// 时长归位
			vlength.value = 0
			voicebg.value = true;
		});
	}

	const playVoice = (e) => {
		innerAudioContext;
		innerAudioContext.src = e;
		innerAudioContext.play();
	}

	// 获取的是两个人所有信息
	const getMessage = () => {
		const id = uni.getStorageSync('idss')
		const toId = uni.getStorageSync('toId')
		uni.request({
			url: 'http://101.42.158.48:3000/rxh/messagelist',
			method: 'POST',
			data: {
				id: id,
				toId: toId
			},
			success: res => {
				// console.log(res.data, 888888888)
				xiaoxiList.value = res.data.data
				// console.log(xiaoxiList.value,'xiaolist');
			},
			fail: () => {},
			complete: () => {}
		});
	}

	// 获取你的好友的备注，头像
	const getData = () => {
		const toId = uni.getStorageSync('toId')
		uni.request({
			url: 'http://101.42.158.48:3000/rxh/getCrony?id=' + toId,
			method: 'GET',
			data: {},
			success: res => {
				// console.log(res.data, 222228888888,'好友')
				data.obj = res.data.data
				uni.setNavigationBarTitle({
					title: data.obj.name
				})
				// console.log(data.obj)
			}
		})
	}


	const getSocket = () => {
		const id = uni.getStorageSync('idss')
		uni.connectSocket({
			url: `ws://localhost:8088/ws?id=${id}`,
			success: (result) => {
				console.log(result, '连接成功');
			},
			fail: (error) => {
				console.log(error);
			}
		})
	}


	onMounted(() => {
		const id = uni.getStorageSync('idss')
		getMessage()
		getData()
		getSocket()
		// 进入页面后显示最后一条消息
		// setTimeout(() => {
			// if (document.getElementById('messageRef')) {
			// 	document.getElementById('messageRef').scrollTo({
			// 		top: document.getElementById('messageRef').scrollHeight,
			// 		behavior: 'smooth'
			// 	})
			// }
			// clearTimeout(document.getElementById('messageRef'))
		// }, 1000)
		
		// 设置一个心跳包
		const timer = setInterval(() => {
			uni.sendSocketMessage({
				data: JSON.stringify({
					mode: 'HEART_BEAT父方法'
				}),
			});
		}, 5000)
		//接收服务器WebSocket错误信息API
		uni.onSocketError((result) => {
			console.log(result, '服务器连接失败');
			reconnect(`ws://localhost:8088/ws?id=${id}`)
		})
		//接收服务器WebSocket断开连接API
		uni.onSocketClose(function(res) {
			console.log('WebSocket服务器已关闭！！！');
			reconnect(`ws://localhost:8088/ws?id=${id}`)
		});
		// websocket断线重连功能模块
		function reconnect(service) {
			// lockReconnect加锁，防止onclose、onerror两次重连
			timeConnect.value++;
			console.log("正在尝试第" + timeConnect.value + "次重连");
			uni.connectSocket({
				url: service
			});
		}
	})


	//接收服务器WebSocket返回数据API
	uni.onSocketMessage(function(res) {
		console.log('收到服务器内容：', JSON.parse(res.data));
		const data = JSON.parse(res.data)
		console.log(data, 2356253254,'接收到服务器消息')
		const {
			mode,
			message,
            sender,
            toid,
            latitude,
            longitude,
            xls,
            time,
            voicetime,
            name,
            types
		} = data
		// console.log('mode:::::', mode)
		if (mode === '') {
			console.log('服务器连接已断开，请重连！！！')
		}
		switch (mode) {
			case 'MESSAGE':
				xiaoxiList.push({
					avatar: avatar,
					message: data.message,
					latitude: data.latitude,
					longitude: data.longitude,
					cronys: [id, toId],
					sender: id,
					isMy: true,
					time: data.time,
					voicetime: data.voicetime,
					basevideo: data.basevideo,
					isMy: true,
					time: data.time,
					xls: data.xls
				});
				lonLat.value['latitude'] = data.latitude
				lonLat.value['longitude'] = data.longitude
				// console.log(xiaoxiList, 777777777)
				break
			case 'HEART_BEAT父方法':
				// console.log('收到服务器心跳机制反应###########3')
				break
		}
	})

	const toggleEmojiPanel = () => {
		showEmojiPanel.value = !showEmojiPanel.value;
		showActionPanel.value = false;
		starting.value = false
	}
	// 发送表情包
	const toggleActionPanel = () => {
		showActionPanel.value = false;
	}

	const ismore = () => {
		showActionPanel.value = true;
	}

	function clickEmoji(item) {
		message.value += item
		showActionPanel.value = !showActionPanel.value
	}

	const files = () => {
		uni.downloadFile({
			url: saveFileUrl.value,
			success: function(res) {
				// console.log(res, '有没有羊的所有信息呀？？？？？？');
				var tempFilePath = res.tempFilePath;
				uni.getFileSystemManager().readFile({
					filePath: tempFilePath,
					success: function(fileData) {
						var data = new Uint8Array(fileData.data);
						// 使用xlsx库解析xlsx文件
						var workbook = XLSX.read(data, {
							type: 'array'
						});
						// 获取第一个工作表
						var sheetName = workbook.SheetNames[0];
						var worksheet = workbook.Sheets[sheetName];
						// console.log(sheetName,worksheet,'工作表');
						// 将工作表转换为JSON对象
						var jsonData = XLSX.utils.sheet_to_json(worksheet, {
							header: 1
						});
						// console.log(jsonData, 'json对象');
						// 获取ID字段,这是只有一个id
						var id = jsonData[1][0]; // 假设ID字段在第二行第一列
						// console.log('ID:', id);
						// 2.所有的id
						// var ids = []; // 用于保存所有的ID
						// for (var i = 1; i < jsonData.length; i++) {
						// 		var id = jsonData[i][0];
						// 		ids.push(id);
						// }
						// console.log('所有的ID:', ids);
						// 下载完成后再打开文件
						uni.openDocument({
							filePath: tempFilePath,
							success: function() {
								// console.log('打开文档成功');
								// 在openDocument API执行完毕后，删除临时文件
								uni.getFileSystemManager().unlink({
									filePath: tempFilePath,
									complete: function(res) {
										console.log('删除临时文件', res);
									}
								});
								// 获取ID字段,这是只有一个id
								const url = '/pages/driverHome/driverHome?id=' +
									id;
								// console.log(id, url, '获取到了不说书实话实说', 'chat.vue');
								uni.navigateTo({
									url: url
								});
								// 2.所有的id
								// 遍历ids数组，为每个ID生成对应的URL并传递给uni.navigateTo
								// ids.forEach((id)=>{
								// 	console.log(id,'便利的所有的id');
								// 	const url = '/pages/driverHome/driverHome?id=' + id
								// 	uni.navigateTo({
								// 		url: url
								// 	})
								// })
							},
							fail: function(err) {
								console.log('打开文档失败', err);
							}
						});
					},
					fail: function(err) {
						console.log('读取文件失败', err);
					}
				});
			},
			fail: function(err) {
				console.log('下载文件失败', err);
			}
		});
	}

	const sendFile = (val) => {
		if (val === 'xls') {
			uni.chooseMessageFile({
				count: 3,
				type: 'file',
				success: function(res) {
					// console.log(res, 'res选择成功');
					var tempFilePaths = res.tempFiles[0].path;
					var savedFilePath = ''; // 保存文件的路径
					uni.saveFile({
						tempFilePath: tempFilePaths,
						success: function(res) {
							let data = {
								savedFilePath: res.savedFilePath
							}
							sendMessage(data)
							saveFileUrl.value = data.savedFilePath
							// console.log('文件保存成功', data.savedFilePath, data);
							// 在这里可以对保存的文件进行操作，如打开、上传等
							uni.uploadFile({
								url: 'data.savedFilePath:',
								success: (res) => {
									console.log(res, '上传成功一月又一月');
								}
							})
						}
					})
				}
			})
		} else if (val === 'position') {
			uni.chooseLocation({
				success: function(res) {
					let data = {
						name: res.name,
						address: res.address,
						latitude: res.latitude,
						longitude: res.longitude,
						time: Date.now(),
						type: 3
					}
					markers.value[0]['latitude'] = res.latitude
					markers.value[0]['longitude'] = res.longitude
					// console.log(res,'······定位结果·······');
					// console.log(markers.value, '我是测试············');
					sendMessage(data)
				}
			});
		}
	}

	//发送消息
	const sendMessage = (e) => {
		const id = uni.getStorageSync('idss')
		const toId = uni.getStorageSync('toId')
		// 处理发送消息的逻辑,获取用户输入的消息内容，在这里包括文字和表情包
		// 如果消息内容为空，则不执行发送操作
		// if (message.value.trim() === '') {
		// 	return;
		// }
		// console.log(e, 28888, '好了呢成功了吗');
		if (e.type === 3) {
			xiaoxiList.value.push({
				message: message.value,
				cronys: [id, toId],
				sender: id,
				isMy: true,
				time: e.time,
				latitude: e.latitude,
				longitude: e.longitude

			})
			uni.request({
				url: 'http://101.42.158.48:3000/rxh/addMessage',
				method: 'POST',
				data: {
					message: message.value,
					cronys: [id, toId],
					sender: id,
					time: Date.now(),
					latitude: e.latitude,
					longitude: e.longitude
				},
				success: res => {
					// console.log(res, '发送成功了啊')
					getMessage()
				}
			});
			//向服务器发送数据API
			uni.sendSocketMessage({
				data: JSON.stringify({
					mode: 'MESSAGE',
					message: message.value,
					cronys: [id, toId],
					sender: id,
					toid: toId,
					id: id,
					latitude: e.latitude,
					longitude: e.longitude
				}),
			});
			// 清空消息输入框
			message.value = '';
			showEmojiPanel.value = false;
			starting.value = true
		} else {
			console.log(e,'eeee')
			xiaoxiList.value.push({
				message: message.value,
				cronys: [id, toId],
				sender: id,
				voicetime: e.timed,
				basevideo: e.voice,
				isMy: true,
				time: e.time,
				xls: e.savedFilePath
			})
			// console.log(xiaoxiList.value, 'xiaogdsadbdhasdbdvhwdy')
			// 在这里处理发送消息的逻辑，可以通过网络请求将消息发送给服务器
			uni.request({
				url: 'http://101.42.158.48:3000/rxh/addMessage',
				method: 'POST',
				data: {
					message: message.value,
					cronys: [id, toId],
					sender: id,
					voicetime: e.time,
					basevideo: e.voice,
					time: Date.now(),
					xls: e.savedFilePath
				},
				success: res => {
					// console.log(res, '发送成功了啊')
					getMessage()
				}
			});
			//向服务器发送数据API
			uni.sendSocketMessage({
				data: JSON.stringify({
					mode: 'MESSAGE',
					message: message.value,
					cronys: [id, toId],
					sender: id,
					toid: toId,
					id: id,
					voicetime: e.time,
					basevideo: e.voice,
					time: Date.now(),
					xls: e.savedFilePath
				}),
			});
			// 清空消息输入框
			message.value = '';
			showEmojiPanel.value = false;
			starting.value = true
		}

	}


	const showSendButtons = () => {
		starting.value = true

	}

	const hideSendButton = () => {
		starting.value = false
	}
</script>



<style scoped>
	.liao {
		width: 100%;
		height: 100%;
	}

	.starts {
		display: block;
		bottom: 450rpx;
	}

	.map {
		width: 400rpx;
		height: 180rpx;
		line-height: 180rpx;
	}

	.start {
		display: none;
		bottom: 0;
		top: 0;
		position: fixed;
		left: 0;
		right: 0;
	}


	.myMess {
		background-color: #95EC69;
		padding: 20rpx;
		border-radius: 20rpx;

	}

	.isHer {
		background-color: #EBEBEB;
		padding: 20rpx;
		margin-left: 10rpx;
		border-radius: 20rpx;
	}

	.xls {
		height: 150rpx;
		width: 300rpx;
		box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.2), 0 6rpx 20rpx 0 rgba(0, 0, 0, 0.19);
		text-align: center;
		align-items: center;
		display: flex;
		border-radius: 10rpx;
		background-color: #fff;
		float: left;
		margin-top: -20rpx;
		margin-left: -80rpx;
		margin-right: -20rpx;
	}

	.xlss {
		height: 150rpx;
		width: 300rpx;
		box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.2), 0 6rpx 20rpx 0 rgba(0, 0, 0, 0.19);
		text-align: center;
		align-items: center;
		display: flex;
		border-radius: 10rpx;
		background-color: #fff;
		float: left;
		margin-top: -20rpx;
		margin-left: -20rpx;
		margin-right: -20rpx;
	}


	.bigBox {
		display: flex;
		justify-content: space-between;
		height: 70%;
		border-bottom: 1px solid #ccc;
	}

	.messlist {
		height: 100%;
		list-style: none;
		width: 100%;
		overflow: hidden;
	}

	.left {
		margin-bottom: 20px;
		padding-left: 10px;

	}

	.right {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 20px;
		padding-right: 10px;
	}

	/* 选中最后一个类选择为right的元素 */
	.right:last-child,
	.left:last-child {
		margin-bottom: 100px;
	}

	.rig {
		position: relative;
	}

	.rigUl {
		position: absolute;
		width: 100%;
		bottom: 0;
		list-style: none;
	}


	.rigUl li {
		width: 100%;
		margin-bottom: 30rpx;
	}

	.rigUl-box {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 10rpx;
	}

	.message-list {
		flex: 1;
		padding: 10rrpx;
	}

	.message {
		margin-bottom: 10rpx;
	}


	.emoji {
		width: 100%;
		height: 400rpx;
		padding: 16rpx 10rpx 28rpx 10rpx;
		box-sizing: border-box;
		overflow: hidden;
		overflow-y: auto;

	}

	.emoji-line {
		display: flex;
	}

	.emoji-line-item {
		flex: 1;
		text-align: center;
		font-size: 40rpx;
		line-height: 68rpx;
	}



	.input-box,
	.sub-chat {
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		display: flex;
		align-items: center;
		background-color: #f0f0f0;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		flex: 1;
	}

	.emoji-btn,
	.action-btn {
		width: 70rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-left: 20rpx;
		margin-right: 8rpx;
	}

	.input-field {
		flex: 1;
		height: 50rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 8rpx;
		outline: none;
		border: none;
	}

	.input-field-case {
		height: 50px;
		margin-left: 32%;
		margin-bottom: 10px;
	}

	.send-btn {
		background-color: #62D197;
		color: #fff;
		border: none;
		text-align: center;
		border-radius: 10rpx;
		font-size: 24rpx;
		height: 70rpx;
		cursor: pointer;
		margin-right: 5rpx;
	}

	.img {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin: 0 10rpx;
		flex: auto;
		border: 1px solid black;
		border-radius: 50%;
	}

	.videoss {
		width: 300rpx;
		height: 270rpx;
		border-radius: 25rpx;
		margin-right: 20rpx;
		margin-left: 20rpx;
	}

	.emos,
	.more {
		position: fixed;
		bottom: 110rpx;
		left: 0;
		right: 0;
		width: 100%;
		background: rgba(236, 237, 238, 1);
		height: 436rpx;
		padding: 4rpx 20rpx;
		box-shadow: 0px -1rpx 0px 0px rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
	}

	.more-list {
		width: 25%;
		text-align: center;
		float: left;
		padding-top: 32rpx;

	}

	.image {
		background: rgba(255, 255, 255, 1);
		border-radius: 24rpx;
		width: 72rpx;
		height: 72rpx;
		padding: 24rpx;

	}

	.more-list-title {
		margin-top: 5rpx;
		font-size: 28rpx;
		color: rgba(39, 40, 50, 0.5);
	}

	.loader {
		position: relative;
		width: 100rpx;
		height: 40rpx;
		line-height: 40rpx;
	}

	.loader__bar {
		position: absolute;
		bottom: 0;
		width: 10px;
		height: 50%;
		background: rgb(0, 0, 0);
		transform-origin: center bottom;
		box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
	}

	.loader__bar:nth-child(1) {
		left: 0px;
		transform: scale(1, 0.2);
		-webkit-animation: barUp1 4s infinite;
		animation: barUp1 4s infinite;
	}

	.loader__bar:nth-child(2) {
		left: 15px;
		transform: scale(1, 0.4);
		-webkit-animation: barUp2 4s infinite;
		animation: barUp2 4s infinite;
	}

	.loader__bar:nth-child(3) {
		left: 30px;
		transform: scale(1, 0.6);
		-webkit-animation: barUp3 4s infinite;
		animation: barUp3 4s infinite;
	}

	.loader__bar:nth-child(4) {
		left: 45px;
		transform: scale(1, 0.8);
		-webkit-animation: barUp4 4s infinite;
		animation: barUp4 4s infinite;
	}


	@keyframes ball624 {
		0% {
			transform: translate(0, 0);
		}

		5% {
			transform: translate(8px, -14px);
		}

		10% {
			transform: translate(15px, -10px);
		}

		17% {
			transform: translate(23px, -24px);
		}

		20% {
			transform: translate(30px, -20px);
		}

		27% {
			transform: translate(38px, -34px);
		}

		30% {
			transform: translate(45px, -30px);
		}

		37% {
			transform: translate(53px, -44px);
		}

		40% {
			transform: translate(60px, -40px);
		}

		50% {
			transform: translate(60px, 0);
		}

		57% {
			transform: translate(53px, -14px);
		}

		60% {
			transform: translate(45px, -10px);
		}

		67% {
			transform: translate(37px, -24px);
		}

		70% {
			transform: translate(30px, -20px);
		}

		77% {
			transform: translate(22px, -34px);
		}

		80% {
			transform: translate(15px, -30px);
		}

		87% {
			transform: translate(7px, -44px);
		}

		90% {
			transform: translate(0, -40px);
		}

		100% {
			transform: translate(0, 0);
		}
	}

	@-webkit-keyframes barUp1 {
		0% {
			transform: scale(1, 0.2);
		}

		40% {
			transform: scale(1, 0.2);
		}

		50% {
			transform: scale(1, 1);
		}

		90% {
			transform: scale(1, 1);
		}

		100% {
			transform: scale(1, 0.2);
		}
	}

	@keyframes barUp1 {
		0% {
			transform: scale(1, 0.2);
		}

		40% {
			transform: scale(1, 0.2);
		}

		50% {
			transform: scale(1, 1);
		}

		90% {
			transform: scale(1, 1);
		}

		100% {
			transform: scale(1, 0.2);
		}
	}

	@-webkit-keyframes barUp2 {
		0% {
			transform: scale(1, 0.4);
		}

		40% {
			transform: scale(1, 0.4);
		}

		50% {
			transform: scale(1, 0.8);
		}

		90% {
			transform: scale(1, 0.8);
		}

		100% {
			transform: scale(1, 0.4);
		}
	}

	@keyframes barUp2 {
		0% {
			transform: scale(1, 0.4);
		}

		40% {
			transform: scale(1, 0.4);
		}

		50% {
			transform: scale(1, 0.8);
		}

		90% {
			transform: scale(1, 0.8);
		}

		100% {
			transform: scale(1, 0.4);
		}
	}

	@-webkit-keyframes barUp3 {
		0% {
			transform: scale(1, 0.6);
		}

		100% {
			transform: scale(1, 0.6);
		}
	}

	@keyframes barUp3 {
		0% {
			transform: scale(1, 0.6);
		}

		100% {
			transform: scale(1, 0.6);
		}
	}

	@-webkit-keyframes barUp4 {
		0% {
			transform: scale(1, 0.8);
		}

		40% {
			transform: scale(1, 0.8);
		}

		50% {
			transform: scale(1, 0.4);
		}

		90% {
			transform: scale(1, 0.4);
		}

		100% {
			transform: scale(1, 0.8);
		}
	}

	@keyframes barUp4 {
		0% {
			transform: scale(1, 0.8);
		}

		40% {
			transform: scale(1, 0.8);
		}

		50% {
			transform: scale(1, 0.4);
		}

		90% {
			transform: scale(1, 0.4);
		}

		100% {
			transform: scale(1, 0.8);
		}
	}
</style>